<template>
    <header :class="['NavBar', { 'has-border': isScrolled }]">
        <div class="container">
            <div class="NavBar-logo">
                <a class="title">
                    <img src="../assets/img/logo.svg" alt="Logo" />
                    <span>Easy Recite</span>
                </a>
            </div>
            <div class="NavBar-menu">
                <span>v1.0.0</span>
            </div>
        </div>
    </header>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const isScrolled = ref(false);

const handleScroll = () => {
    isScrolled.value = window.scrollY > 0;
};

onMounted(() => {
    window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
    @import url("@/assets/css/header.css");

    .NavBar {
        transition: border-color 0.3s ease-in-out;
        border-bottom: 1px solid transparent;
    }

    .NavBar.has-border {
        border-bottom-color: #ccc;
    }
</style>